<template>
	<view >
		<view class="page">
		<view class="user_index">
		    <view class="user_wrap">
		        <image class="user_image" mode='widthFix' :src='userinfo.userimg' />
		        <navigator url='/pages/login/login' class="user_title">
		            <view  class="title_image">
		                <image  :src='userinfo.userimg' />
		            </view>
		            <view class="user_name">
		                {{ userinfo.username }}
		            </view>
		        </navigator>  
		    </view>
		    <view class="user_operation">
		        <!-- 用户功能菜单 -->
		        <view class="one_open">
		            <navigator url="/pages/moment/moment?types=user" class="one_item">
		                    <image src="../../static/taber/dt.png" mode="heightFix"></image>
		                    <view class="title">动态</view>
		            </navigator>
		             <navigator url='/pages/attention/index?btu=a' class="one_item">
		                    <image src="../../static/taber/wjx.png" mode="heightFix"></image>
		                    <view class="title">关注</view>
		            </navigator>
		             <navigator url='/pages/attention/index?btu=b' class="one_item">
		                    <image src="../../static/taber/xq.png" mode="heightFix"></image>
		                    <view class="title">心情</view>
		            </navigator>
		           
		        </view>
		
		        <!-- 程序功能菜单 -->
		        <view class="app_operation">
		
		            <navigator url='/pages/songdetail/index' class="app_item">
		                 <image src="../../static/taber/bqgl.png" mode="heightFix"></image>
		                 <view class="operation">表情管理</view>
		            </navigator>
		              <view class="app_item">
		                 <image src="../../static/taber/yx.png" mode="heightFix"></image>
		                 <view class="operation">青少年模式</view>
		            </view>
		              <view class="app_item">
						  <image src="../../static/taber/kc.png" mode="heightFix"></image>
		                 <view class="operation">课程</view>
		            </view>
		              <navigator url='/pages/feedBack/index' class="app_item">
						  <image src="../../static/taber/fk.png" mode="heightFix"></image>
		                 <view class="operation">反馈</view>
		            </navigator>
		               <view class="app_item">
		                 <image src="../../static/taber/kf.png" mode="heightFix"></image>
		                 <view class="operation">客服</view>
		            </view>
		           
		        </view>
		        <view @click="toUserDetail" class="app_set">
						<image src="../../static/taber/sz.png" mode="heightFix"></image>
		                 <view class="operation">设置</view>
		        </view>
		
		        
		    </view>
		</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utails/request.js'
	export default {
		data() {
			return {
				userinfo:{},
				dt:0,
				gz:0,
				fs:0
		}
		},
		onLoad() {
			this.getBasicData()
		},
		onShow() {
			this.getBasicData()
		},
		methods: {
			
			async getBasicData(){
				
				
				const userinfo = uni.getStorageSync('userinfo')||undefined
				let res = await request.request2({url:'/userdetails/',data:{userid:userinfo.id}})
				this.userinfo = res;
				
				// console.log(this.userinfo)
				if(!userinfo){
					return uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
			toUserDetail(){
				uni.navigateTo({
					url:'../userdetials/userdetials'
				})
			},
		}
	}
</script>

<style lang="less">
	.page{
	    background-color: #eeeeee;
	
		.user_index{
			padding: 15rpx;
			position: relative;
			background-color:  #eeeeee;
			.user_wrap{
				height: 40vw;
				text-align: center;
				.user_image{
				   width: 100%;
				//    border-radius: 50%;
					filter: blur(15rpx);
					// z-index: -1;
				}
		
				.user_title{
					position: absolute;
					top: 36vw;
					left: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					.title_image{
						flex: 1;
						margin-left: 50rpx;
						image{
							height: 120rpx;
							width: 120rpx;
							border-radius: 50%;
						}
					}
		
					.user_name{
						flex: 1;
						font-size: 32rpx;
						
						color: seashell;
		
					}
				}
		
			}
		
			.user_operation{
				position: absolute;
				top:54vw;
				left: 0;
				// height: 100%;
				width: 100%;
				padding: 0 25rpx;
				background-color: #eeeeee;;
				z-index: 1;
				
			   .one_open{
					height: 140rpx;
					width: 95%;
					display: flex;
					justify-content: space-around;
					align-items: center;
					background-color: rgba(255, 255, 255, 1);
					border-radius: 40rpx;
					.one_item{
						flex: 1;
						text-align: center;
						image{
							height: 60rpx;
						}
						.title{
							font-size: 32rpx;
						}
					}
			   }
		
			   
			   .app_operation{
					margin-top: 20rpx;
					width: 95%;
					display: flex;
					flex-direction: column;
					.app_item{
						flex: 1;
						padding: 20rpx;
						font-size: 32rpx;
						background-color: rgb(255, 255, 255);
						border-radius: 28rpx;
						margin: 3rpx 15rpx;
						image{
						   float: left;
							height: 50rpx;
							margin: 0 30rpx;
							
						}
						.operation{
							float: left;
						}
						
					}
			   }
		
			   .app_set{
				   height: 50rpx;
				   width: 88%;
				   padding: 15rpx;
				   margin: 20rpx 15rpx 0rpx;
				   background-color: rgb(255, 255, 255);
				   font-size: 32rpx;
				   border-radius: 28rpx;
				   margin-bottom: 400rpx;
				   image{
					float: left;
					 height: 50rpx;
					 margin: 0 30rpx;
					 
				 }
				 .operation{
					 float: left;
					 
				 }
			   }
		
			   
			}
		}
	}
</style>
